<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>心脏病数据分析可视化</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .chart-container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        h2 {
            color: #666;
            margin-bottom: 20px;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }
        .chart {
            height: 400px;
        }
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        .error {
            display: none;
            color: red;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>心脏病数据分析可视化</h1>
        
        <div class="chart-container">
            <h2>患者分布</h2>
            <div id="class-distribution" class="chart"></div>
            <div class="loading">加载中...</div>
            <div class="error"></div>
        </div>
        
        <div class="chart-container">
            <h2>特征相关性热力图</h2>
            <div id="correlation-heatmap" class="chart"></div>
            <div class="loading">加载中...</div>
            <div class="error"></div>
        </div>
        
        <div class="chart-container">
            <h2>特征与心脏病相关性分析</h2>
            <div id="target-correlation" class="chart"></div>
            <div class="loading">加载中...</div>
            <div class="error"></div>
        </div>
        
        <div class="grid">
            <div class="chart-container">
                <h2>年龄分布</h2>
                <div id="age-distribution" class="chart"></div>
                <div class="loading">加载中...</div>
                <div class="error"></div>
            </div>
            
            <div class="chart-container">
                <h2>性别分布</h2>
                <div id="sex-distribution" class="chart"></div>
                <div class="loading">加载中...</div>
                <div class="error"></div>
            </div>
            
            <div class="chart-container">
                <h2>胸痛类型分布</h2>
                <div id="cp-distribution" class="chart"></div>
                <div class="loading">加载中...</div>
                <div class="error"></div>
            </div>
            
            <div class="chart-container">
                <h2>静息血压分布</h2>
                <div id="trestbps-distribution" class="chart"></div>
                <div class="loading">加载中...</div>
                <div class="error"></div>
            </div>
            
            <div class="chart-container">
                <h2>胆固醇分布</h2>
                <div id="chol-distribution" class="chart"></div>
                <div class="loading">加载中...</div>
                <div class="error"></div>
            </div>
            
            <div class="chart-container">
                <h2>最大心率分布</h2>
                <div id="thalach-distribution" class="chart"></div>
                <div class="loading">加载中...</div>
                <div class="error"></div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        const charts = {
            classDistribution: echarts.init(document.getElementById('class-distribution')),
            correlationHeatmap: echarts.init(document.getElementById('correlation-heatmap')),
            targetCorrelation: echarts.init(document.getElementById('target-correlation')),
            ageDistribution: echarts.init(document.getElementById('age-distribution')),
            sexDistribution: echarts.init(document.getElementById('sex-distribution')),
            cpDistribution: echarts.init(document.getElementById('cp-distribution')),
            trestbpsDistribution: echarts.init(document.getElementById('trestbps-distribution')),
            cholDistribution: echarts.init(document.getElementById('chol-distribution')),
            thalachDistribution: echarts.init(document.getElementById('thalach-distribution'))
        };

        // 显示加载动画
        function showLoading(chartId) {
            const container = document.getElementById(chartId).parentElement;
            container.querySelector('.loading').style.display = 'block';
            container.querySelector('.error').style.display = 'none';
        }

        // 隐藏加载动画
        function hideLoading(chartId) {
            const container = document.getElementById(chartId).parentElement;
            container.querySelector('.loading').style.display = 'none';
        }

        // 显示错误信息
        function showError(chartId, message) {
            const container = document.getElementById(chartId).parentElement;
            container.querySelector('.loading').style.display = 'none';
            container.querySelector('.error').style.display = 'block';
            container.querySelector('.error').textContent = message;
        }

        // 加载数据
        async function loadData() {
            try {
                // 加载患者分布数据
                showLoading('class-distribution');
                const classDistResponse = await axios.get('http://127.0.0.1:5000/api/class_distribution');
                charts.classDistribution.setOption(classDistResponse.data);
                hideLoading('class-distribution');

                // 加载相关性热力图数据
                showLoading('correlation-heatmap');
                const heatmapResponse = await axios.get('http://127.0.0.1:5000/api/correlation_heatmap');
                charts.correlationHeatmap.setOption(heatmapResponse.data);
                hideLoading('correlation-heatmap');

                // 加载特征相关性数据
                showLoading('target-correlation');
                const targetCorrResponse = await axios.get('http://127.0.0.1:5000/api/target_correlation');
                charts.targetCorrelation.setOption(targetCorrResponse.data);
                hideLoading('target-correlation');

                // 加载特征分布数据
                const features = ['age', 'sex', 'cp', 'trestbps', 'chol', 'thalach'];
                for (const feature of features) {
                    const chartId = `${feature}-distribution`;
                    showLoading(chartId);
                    const response = await axios.get(`http://127.0.0.1:5000/api/feature_distribution/${feature}`);
                    charts[`${feature}Distribution`].setOption(response.data);
                    hideLoading(chartId);
                }
            } catch (error) {
                console.error('加载数据失败:', error);
                Object.keys(charts).forEach(key => {
                    const chartId = charts[key].getDom().id;
                    showError(chartId, '加载失败，请刷新页面重试');
                });
            }
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', loadData);

        // 响应式调整
        window.addEventListener('resize', function() {
            Object.values(charts).forEach(chart => chart.resize());
        });
    </script>
</body>
</html> 